మెరుగైన వెబ్‌సైట్ పనితీరు, SEO మరియు వినియోగదారు అనుభవం కోసం CSS ఉపయోగించి చిత్రాలు మరియు ఐఫ్రేమ్‌లను లేజీ లోడ్ చేయడం వల్ల కలిగే ప్రయోజనాలు మరియు అమలును అన్వేషించండి. ఈ సమగ్ర గైడ్ ఆధునిక CSS పద్ధతులు మరియు ఉత్తమ అభ్యాసాలను కవర్ చేస్తుంది.
CSS లేజీ రూల్: ఆప్టిమైజ్ చేసిన వెబ్ పనితీరు కోసం చిత్రాలు మరియు ఐఫ్రేమ్‌లను లేజీ లోడ్ చేయడం
వెబ్ డెవలప్‌మెంట్ యొక్క నిరంతరం అభివృద్ధి చెందుతున్న రంగంలో, వెబ్‌సైట్ పనితీరును ఆప్టిమైజ్ చేయడం చాలా ముఖ్యం. నెమ్మదిగా లోడ్ అయ్యే వెబ్‌సైట్ వినియోగదారులను నిరాశపరచవచ్చు, అధిక బౌన్స్ రేట్లకు దారితీయవచ్చు మరియు చివరికి, మీ సెర్చ్ ఇంజిన్ ర్యాంకింగ్‌పై ప్రతికూల ప్రభావాన్ని చూపుతుంది. పనితీరును పెంచడానికి ఒక శక్తివంతమైన టెక్నిక్ లేజీ లోడింగ్. ఈ గైడ్, ప్రపంచవ్యాప్త ప్రేక్షకుల కోసం ఆచరణాత్మక ఉదాహరణలు మరియు ఉత్తమ అభ్యాసాలను అందిస్తూ, CSS ఉపయోగించి చిత్రాలు మరియు ఐఫ్రేమ్‌ల కోసం లేజీ లోడింగ్‌ను ఎలా అమలు చేయాలో వివరిస్తుంది.
లేజీ లోడింగ్ అంటే ఏమిటి?
లేజీ లోడింగ్ అనేది అవసరమైనంత వరకు వనరుల (చిత్రాలు మరియు ఐఫ్రేమ్‌లు వంటివి) లోడింగ్‌ను వాయిదా వేసే ఒక టెక్నిక్. మరో మాటలో చెప్పాలంటే, ఒక వెబ్‌పేజీ ప్రారంభంలో లోడ్ అయినప్పుడు పేజీలోని అన్ని వనరులను లోడ్ చేయడానికి బదులుగా, వినియోగదారు వ్యూపోర్ట్‌లో కనిపించే వనరులు మాత్రమే లోడ్ చేయబడతాయి. వినియోగదారు పేజీని క్రిందికి స్క్రోల్ చేస్తున్నప్పుడు, అదనపు వనరులు డిమాండ్‌పై లోడ్ చేయబడతాయి. ఈ విధానం ప్రారంభ పేజీ లోడ్ సమయాన్ని గణనీయంగా తగ్గిస్తుంది, వినియోగదారు అనుభవాన్ని మెరుగుపరుస్తుంది మరియు బ్యాండ్‌విడ్త్‌ను ఆదా చేస్తుంది.
లేజీ లోడింగ్ యొక్క ప్రయోజనాలు
- మెరుగైన పేజీ లోడ్ సమయం: ప్రారంభంలో కనిపించే వనరులను మాత్రమే లోడ్ చేయడం ద్వారా, ప్రారంభ పేజీ లోడ్ సమయం తగ్గుతుంది, ఇది వేగవంతమైన వెబ్‌సైట్ అనుభవానికి దారితీస్తుంది.
- తగ్గిన బ్యాండ్‌విడ్త్ వినియోగం: లేజీ లోడింగ్ వినియోగదారు చూడని వనరులను అనవసరంగా డౌన్‌లోడ్ చేయడాన్ని నిరోధిస్తుంది, వెబ్‌సైట్ మరియు వినియోగదారు ఇద్దరికీ బ్యాండ్‌విడ్త్‌ను ఆదా చేస్తుంది. పరిమిత డేటా ప్లాన్‌లు ఉన్న వినియోగదారులకు ఇది చాలా ముఖ్యం.
- మెరుగైన వినియోగదారు అనుభవం: వేగవంతమైన పేజీ లోడ్ సమయాలు మరియు సున్నితమైన స్క్రోలింగ్ మెరుగైన మొత్తం వినియోగదారు అనుభవానికి దోహదం చేస్తాయి. త్వరగా లోడ్ అయ్యే వెబ్‌సైట్‌ను వినియోగదారులు వదిలిపెట్టే అవకాశం తక్కువ.
- మెరుగైన SEO: సెర్చ్ ఇంజన్లు వేగవంతమైన లోడింగ్ సమయాలు ఉన్న వెబ్‌సైట్‌లకు ప్రాధాన్యత ఇస్తాయి. లేజీ లోడింగ్ మీ వెబ్‌సైట్ యొక్క SEO ర్యాంకింగ్‌ను మెరుగుపరచడంలో సహాయపడుతుంది.
- తక్కువ సర్వర్ ఖర్చులు: తగ్గిన బ్యాండ్‌విడ్త్ వినియోగం తక్కువ సర్వర్ ఖర్చులకు దారితీయవచ్చు, ముఖ్యంగా పెద్ద సంఖ్యలో చిత్రాలు మరియు ఐఫ్రేమ్‌లు ఉన్న వెబ్‌సైట్‌ల కోసం.
- మెరుగైన వనరుల వినియోగం: లేజీ లోడింగ్ వనరులను అవసరమైనప్పుడు మాత్రమే లోడ్ చేయడం ద్వారా వాటి వినియోగాన్ని ఆప్టిమైజ్ చేస్తుంది.
CSS లేజీ లోడింగ్: ఆధునిక విధానం
ఆధునిక బ్రౌజర్‌లు ఇప్పుడు HTML లో loading అట్రిబ్యూట్‌ను ఉపయోగించి స్థానిక లేజీ లోడింగ్‌కు మద్దతు ఇస్తున్నాయి. ఈ అట్రిబ్యూట్‌ను <img> మరియు <iframe> ఎలిమెంట్‌లకు వర్తింపజేయవచ్చు, ఇది జావాస్క్రిప్ట్‌పై ఆధారపడకుండా లేజీ లోడింగ్‌ను అమలు చేయడం చాలా సులభం చేస్తుంది.
loading అట్రిబ్యూట్
loading అట్రిబ్యూట్ మూడు విలువలను అంగీకరిస్తుంది:
lazy: వనరు వ్యూపోర్ట్‌కు దగ్గరగా వచ్చే వరకు బ్రౌజర్ లోడింగ్‌ను వాయిదా వేయాలని సూచిస్తుంది.eager: వ్యూపోర్ట్‌లో దాని స్థానంతో సంబంధం లేకుండా బ్రౌజర్ వనరును వెంటనే లోడ్ చేయాలని సూచిస్తుంది. ఇది డిఫాల్ట్ ప్రవర్తన.auto: లేజీ లోడ్ చేయాలో లేదో బ్రౌజర్ నిర్ణయించుకోనివ్వండి. బ్రౌజర్ సాధారణంగా `lazy` పేర్కొన్నట్లుగా ప్రవర్తిస్తుంది.
చిత్రాల కోసం లేజీ లోడింగ్‌ను అమలు చేయడం
ఒక చిత్రాన్ని లేజీ లోడ్ చేయడానికి, <img> ట్యాగ్‌కు loading="lazy" అట్రిబ్యూట్‌ను జోడించండి:
<img src="image.jpg" alt="Description of the image" loading="lazy">
ఉదాహరణ:
<img src="images/london-eye.jpg" alt="The London Eye" loading="lazy">
<img src="images/eiffel-tower.jpg" alt="The Eiffel Tower" loading="lazy">
<img src="images/great-wall.jpg" alt="The Great Wall of China" loading="lazy">
ఈ ఉదాహరణలో, లండన్ ఐ, ఈఫిల్ టవర్ మరియు చైనా యొక్క గ్రేట్ వాల్ చిత్రాలు వినియోగదారు వ్యూపోర్ట్‌లో కనిపించడానికి సిద్ధంగా ఉన్నప్పుడు మాత్రమే లోడ్ చేయబడతాయి.
ఐఫ్రేమ్‌ల కోసం లేజీ లోడింగ్‌ను అమలు చేయడం
అదేవిధంగా, మీరు <iframe> ట్యాగ్‌కు loading="lazy" అట్రిబ్యూట్‌ను జోడించడం ద్వారా ఐఫ్రేమ్‌లను లేజీ లోడ్ చేయవచ్చు:
<iframe src="https://www.youtube.com/embed/VIDEO_ID" loading="lazy"></iframe>
ఉదాహరణ:
<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" loading="lazy"></iframe>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2482.9554733630316!2d-0.1269456842202068!3d51.50735097964078!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487604ce1854c4f1%3A0x6f72d6a9740a5af!2sBuckingham%20Palace!5e0!3m2!1sen!2suk!4v1684752824355!5m2!1sen!2suk" loading="lazy"></iframe>
ఇది యూట్యూబ్ వీడియో మరియు గూగుల్ మ్యాప్స్ ఐఫ్రేమ్‌లను వ్యూపోర్ట్‌కు దగ్గరగా వచ్చే వరకు లోడ్ చేయకుండా నిరోధిస్తుంది, ప్రారంభ పేజీ లోడ్ సమయాన్ని మెరుగుపరుస్తుంది.
లేజీ లోడింగ్ కోసం అధునాతన CSS పద్ధతులు
loading అట్రిబ్యూట్ లేజీ లోడింగ్‌ను అమలు చేయడానికి సులభమైన మార్గం అయినప్పటికీ, మీరు ప్లేస్‌హోల్డర్‌లు మరియు విజువల్ క్యూలను అందించడానికి CSS ను ఉపయోగించి అనుభవాన్ని మరింత మెరుగుపరచవచ్చు.
ప్లేస్‌హోల్డర్ చిత్రాలు
చిత్రం లోడ్ అవుతున్నప్పుడు ఖాళీ స్థలాన్ని ప్రదర్శించడానికి బదులుగా, మీరు ప్లేస్‌హోల్డర్ చిత్రాన్ని ఉపయోగించవచ్చు. ఇది అసలు చిత్రం యొక్క తక్కువ-రిజల్యూషన్ వెర్షన్ లేదా సాధారణ ప్లేస్‌హోల్డర్ గ్రాఫిక్ కావచ్చు.
ఉదాహరణ:
<img src="placeholder.jpg" data-src="image.jpg" alt="Description of the image" loading="lazy">
ఈ సందర్భంలో, src అట్రిబ్యూట్ ప్లేస్‌హోల్డర్ చిత్రం యొక్క URL ను కలిగి ఉంటుంది, అయితే data-src అట్రిబ్యూట్ అసలు చిత్రం యొక్క URL ను కలిగి ఉంటుంది. జావాస్క్రిప్ట్ (లేదా పాలిఫిల్స్) చిత్రం వీక్షణలోకి రాబోతున్నప్పుడు `src` ను `data-src` విలువతో భర్తీ చేయడానికి ఉపయోగించవచ్చు.
CSS ట్రాన్సిషన్స్
చిత్రం లోడ్ అయినప్పుడు మృదువైన ఫేడ్-ఇన్ ప్రభావాన్ని సృష్టించడానికి మీరు CSS ట్రాన్సిషన్లను ఉపయోగించవచ్చు. ఇది విజువల్ అప్పీల్‌ను మెరుగుపరుస్తుంది మరియు లేజీ లోడింగ్ ప్రక్రియను వినియోగదారుకు తక్కువ ఇబ్బందికరంగా చేస్తుంది.
ఉదాహరణ:
img {
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
img[loading="lazy"] {
opacity: 1; /* Or whatever the final opacity should be */
}
ఈ CSS కోడ్ అన్ని చిత్రాల ప్రారంభ అస్పష్టతను 0కి సెట్ చేస్తుంది మరియు చిత్రం loading="lazy" అట్రిబ్యూట్‌ను కలిగి ఉన్నప్పుడు అస్పష్టతను 1కి మారుస్తుంది. అయితే, ఇది సరిగ్గా పనిచేయడానికి జావాస్క్రిప్ట్ లేదా పాలిఫిల్స్ అవసరం.
బ్రౌజర్ మద్దతు మరియు పాలిఫిల్స్
loading అట్రిబ్యూట్‌కు చాలా ఆధునిక బ్రౌజర్‌లు మద్దతు ఇస్తాయి. అయితే, పాత బ్రౌజర్‌లు దీనికి మద్దతు ఇవ్వకపోవచ్చు. అన్ని బ్రౌజర్‌లలో లేజీ లోడింగ్ పనిచేస్తుందని నిర్ధారించుకోవడానికి, మీరు ఒక పాలిఫిల్‌ను ఉపయోగించవచ్చు. పాలిఫిల్ అనేది పాత బ్రౌజర్‌లలో కొత్త ఫీచర్ యొక్క కార్యాచరణను అందించే జావాస్క్రిప్ట్ కోడ్ యొక్క ఒక భాగం.
ఇంటర్‌సెక్షన్ అబ్జర్వర్ API
ఇంటర్‌సెక్షన్ అబ్జర్వర్ API అనేది ఒక శక్తివంతమైన జావాస్క్రిప్ట్ API, ఇది ఒక ఎలిమెంట్ వ్యూపోర్ట్‌లోకి ప్రవేశించినప్పుడు లేదా నిష్క్రమించినప్పుడు గుర్తించడానికి మిమ్మల్ని అనుమతిస్తుంది. ఈ API loading అట్రిబ్యూట్‌కు మద్దతు ఇవ్వని బ్రౌజర్‌లలో లేజీ లోడింగ్‌ను అమలు చేయడానికి ఉపయోగించవచ్చు.
ఉదాహరణ (సరళీకృతం):
const images = document.querySelectorAll('img[loading="lazy"]');
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
observer.unobserve(img);
}
});
});
images.forEach((img) => {
observer.observe(img);
});
ఈ కోడ్ loading="lazy" అట్రిబ్యూట్‌తో అన్ని చిత్రాలను పర్యవేక్షించే ఒక ఇంటర్‌సెక్షన్ అబ్జర్వర్‌ను సృష్టిస్తుంది. ఒక చిత్రం వ్యూపోర్ట్‌లోకి ప్రవేశించినప్పుడు, అబ్జర్వర్ src అట్రిబ్యూట్‌ను data-src అట్రిబ్యూట్ యొక్క విలువతో భర్తీ చేస్తుంది, ఇది చిత్రాన్ని లోడ్ చేయడానికి ప్రేరేపిస్తుంది. అప్పుడు అబ్జర్వర్ చిత్రాన్ని గమనించడం ఆపివేస్తుంది.
లేజీ లోడింగ్ కోసం ఉత్తమ అభ్యాసాలు
- మొదట కనిపించే కంటెంట్‌కు ప్రాధాన్యత ఇవ్వండి: ప్రారంభ వ్యూపోర్ట్‌లో కనిపించే కంటెంట్ ఆతృతగా లోడ్ చేయబడిందని నిర్ధారించుకోండి. లేజీ లోడింగ్ ప్రధానంగా ఫోల్డ్ క్రింద ఉన్న కంటెంట్ కోసం ఉపయోగించాలి.
- తగిన ప్లేస్‌హోల్డర్‌లను ఉపయోగించండి: తేలికైన మరియు దృశ్యపరంగా ఆకర్షణీయంగా ఉండే ప్లేస్‌హోల్డర్ చిత్రాలను ఎంచుకోండి. లేజీ లోడింగ్ యొక్క ప్రయోజనాలను రద్దు చేయగల పెద్ద లేదా సంక్లిష్టమైన ప్లేస్‌హోల్డర్‌లను ఉపయోగించడం మానుకోండి.
- వినియోగదారు అనుభవాన్ని పరిగణించండి: వినియోగదారు అనుభవం గురించి జాగ్రత్తగా ఉండండి. మృదువైన ఫేడ్-ఇన్ ప్రభావాలను సృష్టించడానికి CSS ట్రాన్సిషన్లను ఉపయోగించండి మరియు చిత్రాలు లోడ్ అవుతున్నప్పుడు లేఅవుట్‌లో ఆకస్మిక మార్పులను నివారించండి.
- క్షుణ్ణంగా పరీక్షించండి: మీ లేజీ లోడింగ్ అమలు సరిగ్గా పనిచేస్తుందని మరియు ఎలాంటి ఊహించని సమస్యలను పరిచయం చేయదని నిర్ధారించుకోవడానికి వివిధ బ్రౌజర్‌లు మరియు పరికరాలలో పరీక్షించండి.
- పనితీరును పర్యవేక్షించండి: మీ వెబ్‌సైట్ లోడింగ్ సమయం మరియు మొత్తం పనితీరుపై లేజీ లోడింగ్ ప్రభావాన్ని పర్యవేక్షించడానికి వెబ్ పనితీరు సాధనాలను ఉపయోగించండి.
- లోపాలను సునాయాసంగా నిర్వహించండి: చిత్రాలు లోడ్ చేయడంలో విఫలమైన సందర్భాలను సునాయాసంగా నిర్వహించడానికి లోపం నిర్వహణను అమలు చేయండి. వినియోగదారుకు ఫాల్‌బ్యాక్ చిత్రం లేదా సందేశాన్ని ప్రదర్శించండి.
- యాక్సెసిబిలిటీ పరిగణనలు: మీ లేజీ లోడింగ్ అమలు వైకల్యాలున్న వినియోగదారులకు అందుబాటులో ఉందని నిర్ధారించుకోండి. చిత్రాల కోసం ప్రత్యామ్నాయ వచనాన్ని అందించండి మరియు ఎలిమెంట్ల లోడింగ్ స్థితిని తెలియజేయడానికి ARIA అట్రిబ్యూట్‌లను ఉపయోగించండి.
- అధిక లేజీ లోడింగ్‌ను నివారించండి: లేజీ లోడింగ్ పనితీరును మెరుగుపరచగలదు, కానీ అధిక లేజీ లోడింగ్ వినియోగదారు అనుభవాన్ని ప్రతికూలంగా ప్రభావితం చేస్తుంది. వెబ్‌సైట్ ప్రతిస్పందించే మరియు ఇంటరాక్టివ్‌గా ఉండేలా కీలక వనరులను ఆతృతగా లోడ్ చేయండి.
నివారించాల్సిన సాధారణ ఆపదలు
- మొదట కనిపించే కంటెంట్‌ను లేజీ లోడ్ చేయడం: ఇది కీలక కంటెంట్ లోడింగ్‌ను ఆలస్యం చేస్తుంది మరియు వినియోగదారు అనుభవాన్ని ప్రతికూలంగా ప్రభావితం చేస్తుంది.
- పెద్ద ప్లేస్‌హోల్డర్ చిత్రాలను ఉపయోగించడం: ఇది లేజీ లోడింగ్ యొక్క పనితీరు ప్రయోజనాలను రద్దు చేస్తుంది.
- బ్రౌజర్ అనుకూలతను విస్మరించడం: మీ లేజీ లోడింగ్ అమలు వివిధ బ్రౌజర్‌లు మరియు పరికరాలలో పనిచేస్తుందని నిర్ధారించుకోండి.
- క్షుణ్ణంగా పరీక్షించడంలో విఫలమవడం: ఏవైనా సంభావ్య సమస్యలను గుర్తించి పరిష్కరించడానికి మీ అమలును పరీక్షించండి.
- పనితీరును పర్యవేక్షించకపోవడం: మీ వెబ్‌సైట్ పనితీరుపై లేజీ లోడింగ్ ప్రభావాన్ని పర్యవేక్షించండి.
లేజీ లోడింగ్ మరియు SEO
లేజీ లోడింగ్, సరిగ్గా అమలు చేసినప్పుడు, SEO పై సానుకూల ప్రభావాన్ని చూపుతుంది. పేజీ లోడ్ సమయాన్ని మెరుగుపరచడం ద్వారా, ఇది పరోక్షంగా సెర్చ్ ఇంజిన్ ఫలితాలలో మీ వెబ్‌సైట్ ర్యాంకింగ్‌ను మెరుగుపరుస్తుంది. అయితే, సెర్చ్ ఇంజిన్ క్రాలర్‌లు ఇప్పటికీ మీ చిత్రాలను యాక్సెస్ చేసి ఇండెక్స్ చేయగలరని నిర్ధారించుకోవడం ముఖ్యం. <noscript> ట్యాగ్‌ను ఉపయోగించడం జావాస్క్రిప్ట్ డిసేబుల్ చేయబడినప్పటికీ సెర్చ్ ఇంజన్లు చిత్రాలను కనుగొనగలవని నిర్ధారించడానికి సహాయపడుతుంది.
ఉదాహరణ:
<img data-src="image.jpg" alt="Description of the image" loading="lazy">
<noscript><img src="image.jpg" alt="Description of the image"></noscript>
<noscript> ట్యాగ్ జావాస్క్రిప్ట్‌కు మద్దతు ఇవ్వని లేదా జావాస్క్రిప్ట్ డిసేబుల్ చేయబడిన బ్రౌజర్‌ల కోసం ఫాల్‌బ్యాక్‌ను అందిస్తుంది. ఈ సందర్భంలో, <noscript> ట్యాగ్ లోపల ఉన్న <img> ట్యాగ్ లేజీ-లోడెడ్ చిత్రానికి బదులుగా ప్రదర్శించబడుతుంది.
ముగింపు
లేజీ లోడింగ్ అనేది వెబ్‌సైట్ పనితీరును ఆప్టిమైజ్ చేయడానికి మరియు వినియోగదారు అనుభవాన్ని మెరుగుపరచడానికి ఒక శక్తివంతమైన టెక్నిక్. క్లిష్టమైనవి కాని వనరుల లోడింగ్‌ను వాయిదా వేయడం ద్వారా, మీరు ప్రారంభ పేజీ లోడ్ సమయాన్ని గణనీయంగా తగ్గించవచ్చు, బ్యాండ్‌విడ్త్‌ను ఆదా చేయవచ్చు మరియు మీ వెబ్‌సైట్ SEO ర్యాంకింగ్‌ను మెరుగుపరచవచ్చు. loading అట్రిబ్యూట్ రాకతో, లేజీ లోడింగ్‌ను అమలు చేయడం గతంలో కంటే సులభం అయ్యింది. ఈ గైడ్‌లో వివరించిన ఉత్తమ అభ్యాసాలను అనుసరించడం ద్వారా, మీరు మీ వెబ్‌సైట్‌లో లేజీ లోడింగ్‌ను సమర్థవంతంగా అమలు చేయవచ్చు మరియు దాని అనేక ప్రయోజనాలను పొందవచ్చు.
గుర్తుంచుకోండి, మొదట కనిపించే కంటెంట్‌కు ప్రాధాన్యత ఇవ్వండి, తగిన ప్లేస్‌హోల్డర్‌లను ఉపయోగించండి, క్షుణ్ణంగా పరీక్షించండి మరియు పనితీరును పర్యవేక్షించండి, తద్వారా మీ లేజీ లోడింగ్ అమలు ప్రపంచంలో ఎక్కడ ఉన్నా మీ వినియోగదారులకు సాధ్యమైనంత ఉత్తమ ఫలితాలను అందిస్తుంది.